<template>
	<view>
		<!-- #V2G功能 放电价格展示 -->
		<template v-if="isV2GOption && gunType == 'dischargeItem'">
			<view class="disFlex">
				<view class="one">
					<view :class="gunType + ' txt1'">闲{{ siteItemData.gunPriceInfo[gunType].freeGunCount }}</view>
					<view class="txt2">/共{{ siteItemData.gunPriceInfo[gunType].gunCount }}</view>
				</view>
					<view class="txt2" v-if="!siteItemData.gunPriceInfo[gunType].allDayPriceUnifyFlag">{{
								siteItemData.gunPriceInfo[gunType].dischargeStartTime }}-{{ siteItemData.gunPriceInfo[gunType].dischargeEndTime
				}}</view>
				<view class="txt2" v-else>全天价格统一</view>
			</view>
			<view class="price_view">
				<view class="total_view www">
					<view class="zxj_view zdyh_dkh">
						<view class="current_view">
							<text class="v_text_current">
								¥
								<text class="current_t">{{ siteItemData.gunPriceInfo[gunType].dischargePriceStr }}</text>
							</text>
						</view>
					</view>
				</view>
				<!-- 电费和服务费 -->
				<!-- <view class="branch_view">
					<view class="branch_item">
							电费{{ siteItemData.gunPriceInfo[gunType].dischargePowerPriceStr }}元/度 | 服务费{{siteItemData.gunPriceInfo[gunType].dischargeServicePriceStr }}元/度
						</view>
				</view> -->
			</view>
		</template>
		<template v-else>
		<view class="disFlex">
			<view class="one">
				 <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/exceed.png" v-if="gunType == 'superItem'"></image>
				<image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/fast.png" v-if="gunType == 'fastItem'"></image>
				<image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/slow.png" v-if="gunType == 'slowItem'"></image>
				<view :class="gunType + ' txt1'">闲{{ siteItemData.gunPriceInfo[gunType].freeGunCount }}</view>
				<view class="txt2">/共{{ siteItemData.gunPriceInfo[gunType].gunCount }}</view>
			</view>
			<view class="txt2" v-if="!siteItemData.gunPriceInfo[gunType].allDayPriceUnifyFlag">{{
	            siteItemData.gunPriceInfo[gunType].currentStartTime }}-{{ siteItemData.gunPriceInfo[gunType].currentEndTime
	    }}</view>
			<view class="txt2" v-else>全天价格统一</view>
		</view>

		<!-- 831价格展示 -->
		<view class="price_view">
			<!-- 先判断 是否有专享价 -->
			<view class="total_view yyy" v-if="siteItemData.gunPriceInfo[gunType].exclusiveDiscount">
				<!-- 只有专享价 -->
				<view class="zxj_view zxj">
					<view class="current_view">
						<text class="v_text_current">
							¥<text class="current_t">{{ siteItemData.gunPriceInfo[gunType].currentPriceStr }}</text>
						</text>
					</view>
					<view class="img_view_831_bg">
						<image class="v_icon"
							src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/zxj_bg.png"
							mode="scaleToFill" />
						<view class="v_text">
							<text>
								¥{{ siteItemData.gunPriceInfo[gunType].exclusivePriceStr }}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="total_view www" v-else>
				<view class="zxj_view zdyh_dkh">
					<view class="current_view">
						<text class="v_text_current">
							¥<text
								class="current_t">{{ siteItemData.gunPriceInfo[gunType].discount ? siteItemData.gunPriceInfo[gunType].discountPriceStr : siteItemData.gunPriceInfo[gunType].currentPriceStr}}</text>
						</text>
					</view>
					<!-- 划线价展示：站点优惠 || 成长会员折扣 || 大客户价 -->
					<!-- 23.11.22 付费会员不显示划线价 -->
					<view class="hxj_view" v-if="siteItemData.gunPriceInfo[gunType].discount || siteItemData.gunPriceInfo[gunType].growthleDiscount || siteItemData.gunPriceInfo[gunType].contractDiscount">
						<text class="v_text">
							¥{{ siteItemData.gunPriceInfo[gunType].currentPriceStr }}
						</text>
					</view>
					
					<!-- 大客户价展示条件 -->
					<view class="img_view_831_bg" v-if="siteItemData.gunPriceInfo[gunType].contractDiscount">
						<image class="v_icon"
							src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/dkh_bg.png"
							mode="scaleToFill" />
						<view class="v_text">
							<text>
								¥{{ siteItemData.gunPriceInfo[gunType].contractPriceStr }}
							</text>
						</view>
					</view>			
					<!-- 成长会员价展示 -->
					<view class="img_view_831_bg" v-if="siteItemData.gunPriceInfo[gunType].growthleDiscount">
						<image class="v_icon"
							src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-huiyuan.png"
							mode="scaleToFill" />
						<view class="v_text">
							<text>
								¥{{ siteItemData.gunPriceInfo[gunType].growthlePriceStr }}
							</text>
						</view>
					</view>
					<!-- 付费会员价展示 -->
					<view class="img_view_831_bg" v-if="siteItemData.gunPriceInfo[gunType].payleDiscount">
						<image class="v_icon"
							src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-vip.png"
							mode="scaleToFill" />
						<view class="v_text">
							<!-- 李总要求去掉起字 -->
							<text>
								¥{{ siteItemData.gunPriceInfo[gunType].paylePriceStr }}
							</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 电费和服务费 -->
			<view class="branch_view">
				<!-- 先判断 是否有专享价 -->
				<template v-if="siteItemData.gunPriceInfo[gunType].exclusiveDiscount">
					<view class="branch_item">
						电费{{ siteItemData.gunPriceInfo[gunType].originalPowerPriceStr }}元/度 | 服务费{{
	                        siteItemData.gunPriceInfo[gunType].originalServicePriceStr }}元/度
					</view>
				</template>
				<template v-else>
					<!-- 站点优惠 -->
					<view class="branch_item" v-if="siteItemData.gunPriceInfo[gunType].discount">
						电费{{ siteItemData.gunPriceInfo[gunType].currentPowerPriceStr }}元/度 | 服务费{{
	                        siteItemData.gunPriceInfo[gunType].currentServicePriceStr }}元/度
					</view>
					<!-- 专享价和大客户 -->
					<view class="branch_item" v-else>
						电费{{ siteItemData.gunPriceInfo[gunType].originalPowerPriceStr }}元/度 | 服务费{{
	                        siteItemData.gunPriceInfo[gunType].originalServicePriceStr }}元/度
					</view>
				</template>
			</view>
		</view>
		</template>
	</view>
</template>
<script lang="ts">
	export default {
		data() {
			return {
				
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			gunType: {
				type: String,
				default: 'fastItem'
			},
			siteItemData:{
				type: Object,
				default: ()=>{return {}}
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			
		},
		created: function () {

		}
	}
</script>
<style lang="less" scoped>
	@import "../../../commin/commin.less";
	    .priceInfo {
	        display: flex;
	        justify-content: space-between;
	        margin-bottom: 40rpx;
	        .fontsize(34rpx);
	        font-family: PingFang SC;
	        font-weight: bold;
	        color: @text-color2;
	
	        .txt {
	            display: flex;
	            align-items: center;
	            .fontsize(28rpx);
	            font-family: PingFang SC;
	            font-weight: 500;
	            color: @blue;
	
	            .txtImg {
	                .kuangao(16rpx, 27rpx);
	                margin-left: 17rpx;
	            }
	        }
	    }
	
	    .exceed {
	        background: rgba(20, 135, 250, 0.08);
	        .paddings(38rpx, 30rpx, 38rpx, 30rpx);
	        margin-bottom: 16rpx;
	
	        .txt1 {
	            .fontsize(24rpx);
	            font-family: PingFang SC;
	            font-weight: 500;
	            color: @blue;
	        }
	    }
	
	    .img {
	        .kuangao(51rpx, 40rpx);
	        margin-right: 14rpx;
	    }
	
	    .one {
	        display: flex;
	        align-items: center;
	        letter-spacing: 3rpx
	    }
	
		.txt1 {
            .fontsize(24rpx);
            font-family: PingFang SC;
            font-weight: 500;
            // color: @blue;
        }
		.superItem{
			color: @blue;
		}
		.fastItem{
			color: @orange;
		}
		.slowItem{
			color: @green;
		}

		.txt2 {
	        .fontsize(24rpx);
	        font-family: PingFang SC;
	        font-weight: 500;
	        color: @text-color4;
	    }
	
	    .txt3 {
	        .fontsize(30rpx);
	        font-family: PingFang SC;
	        font-weight: bold;
	        color: @text-color2;
	    }
	
	    .txt4 {
	        .fontsize(40rpx);
	        font-family: DIN;
	        font-weight: bold;
	        color: var(--textColor);
	        display: flex;
	        align-items: baseline;
	        margin-left: 32rpx;
	    }
	
	    .txt5 {
	        .fontsize(30rpx);
	        font-family: MyriadPro-Regular;
	        font-weight: Regular;
	        color: var(--textColor);
	    }
	
	    .disFlex {
	        display: flex;
	        justify-content: space-between;
	    }
	
	    .fast {
	        background: rgba(252, 140, 110, 0.08);
	        .paddings(38rpx, 30rpx, 38rpx, 30rpx);
	        margin-bottom: 16rpx;
	
	        .txt1 {
	            .fontsize(24rpx);
	            font-family: PingFang SC;
	            font-weight: 500;
	            color: @orange;
	        }
	    }
	
	    .slow {
	        background: rgba(148, 213, 104, 0.08);
	        .paddings(38rpx, 30rpx, 38rpx, 30rpx);
	
	        .txt1 {
	            .fontsize(24rpx);
	            font-family: PingFang SC;
	            font-weight: 500;
	            color: @green;
	        }
	    }
		
		
		
		//831价格展示
		.price_view{
		    // 当前价格
		    .total_view{
		        margin-top: 15rpx;
		        display: flex;
		        align-items: center;
		        //专享价和大客户
		        .zxj_view{
		            display: flex;
		            align-items: center;
		            .current_view{
		              margin-right: 10rpx;
		              .v_text_current{
		                font-size: 22rpx;
		                font-family: PingFang SC-Medium, PingFang SC;
		                font-weight: 400;
		                color: var(--textColor);
		                .current_t{
		                    font-size: 32rpx;
		                    font-family: PingFang SC-Regular, PingFang SC;
		                    font-weight: 600;
		                }
		              }
		            }
		      
		          //站点优惠 划线价
		          .hxj_view{
		            margin-right: 10rpx;
		            color: #909399;
		            .v_text{
		              font-size: 24rpx;
		              // font-family: PingFang SC-Regular, PingFang SC;
		              font-weight: 400;
		              text-decoration: line-through;
		            }
		          }
		          //图片
		          .img_view{
		            position: relative;
		            display: flex;
		            align-items: center;
		            .v_icon{
		              max-width: 280rpx;
		              height: 40rpx;
		            }
		            .v_text{
		              position: absolute;
		              right: 2%;
		              font-size: 24rpx;
		              font-family: PingFang SC-Regular, PingFang SC;
		              font-weight: 400;
		              color: #2E3033;
		            }
		          }
		        }
		        
		    }
		
		    //电费和服务费
		    .branch_view{
		        margin-top: 10rpx;
		        display: flex;
		        align-items: center;
		        .branch_item{
		            font-size: 24rpx;
		            font-family: PingFang SC-Medium, PingFang SC;
		            font-weight: 400;
		            color: #909399;
		        }
		
		    }
		}
		
		
		
		
	
</style>